HTML - Siglas e Termos

Desenvolvimento de Apps

No exercício da profissão usamos certos 'jargões' que para os iniciantes no ramo parece outro idioma. Um termo que a gente não conhece e a frase perde totalmente o significado.

Para um médico se você falar uma sigla como 'TEP' ele sabe que é 'embolia pulmonar' ou 'tromboembolismo pulmonar'. TB significa tuberculose e se você falar a sigla 'tb' em público assusta muito menos que falar 'tuberculose' porque todos sabemos que a doença é muito contagiosa. Se você falar para um mecânico que precisa trocar o 'corta-fogo' do seu carro ele sabe exatamente a peça que precisará substituir. Se você entende de vendas sabe que 'churn' é o fato que ocorre quando você tem um cliente usando seu serviço/produto e ele opta, na renovação do contrato do serviço, por um concorrente. É um termo que significa evasão de clientes, péssimo para vendas.É muito mais fácil falar 'churn' que dar toda essa explicação.

Em TI é assim também, não ficamos perdendo tempo falando frases / palavras completas ou explicando detalhes se um termo expressa essa informação.
É muito mais fácil falar 'app' que uma aplicação nativa da plataforma ou uma aplicação web para a plataforma.
O x da questão é que são muitas siglas e algumas você jamais utilizará e outras farão parte do seu dia-a-dia.

Existem muitas siglas e termos que a gente se depara trabalhando com determinada tecnologia. Muitas implementações e funcionalidades 'similares' tem nomes diferentes nesses sistemas que só servem para criar confusão. Os 'fabricantes' gostam de apresentar como se fosse uma inovação, uma coisa única mas, na realidade existem há muito tempo em outras plataformas.

Muitas vezes usamos termos que estamos cansados de usar tão corriqueiramente que esquecemos que quem esta aprendendo pode nunca ter ouvido falar no termo. Portanto, a seguir temos as Siglas e Termos mais comuns para quem trabalha com desenvolvimento web e nativo.
Contudo dependo do fabricante da linguagem ele poderá usar outro termo para designar os conceitos abaixo mas eles existem em todas as linguagens.

Client-Side e Server-Side

Você se lembra que toda página web é composta pelo menos por 2 agentes :
1 - um web-server que publicou a página (HTML) e o
2 - um browser do seu micro que exibiu a página para você.
É chamada também de 2 tiers ou arquitetura cliente-servidor.
Contudo na grande maioria dos sites são 3 tiers porque tem um servidor de banco de dados que tem os dados a serem exibidos na página.
Uma página html costuma ser 2-tiers mas uma página asp net costuma ser 3-tiers.

Em web, Client-Side significa que o item abordado funciona do lado do cliente, dentro do browser e do computador do 'usuário / cliente'. Existem itens específicos que são utilizados no lado do cliente como quando falamos do javascript. É uma linguagem que nasceu client-side e, por exemplo, permite a validação de informações ainda no cliente evitando de enviá-las ao servidor ( submit ou post ) e descobrir que falta algo ou tem erro. Hoje em dia tem muito JavaScript no lado do servidor na programação web mais recente.

Server-Side significa que item abordado funciona do lado do servidor, dentro do web-server . O Caso mais comum é a linguagem ASP NET ou PHP que são linguagens de desenvolvimento de páginas dinâmicas que funcionam dentro do servidor web que transformam 'dados', por exemplo de bancos de dados, em 'html' para que o browser exiba.

FrontEnd e Backend

Se você faz um site para uma empresa tem pelo menos 3 envolvidos no projeto :
1-Você, o desenvolvedor,
2-O cliente ou empresa que contratou o desenvolvimento do site e
3-O cliente que vai comprar ou interagir com o site.
Sendo assim chamamos de 'frontend' tudo que envolve o atendimento ao cliente. Vendas é o caso típico.
Chamamos de 'backend' tudo que mantém a empresa funcionando. Controle de estoque, logística pós venda, etc.
Como regra, o frontend é mais bem feito que o backend por ter relação direta com cliente, é um 'cartão de visitas' da empresa.

Código Fonte ou Source Code

Quando desenvolvemos um programa ou página web desenvolvemos um 'código' para executar alguma tarefa e no 'código' dessa página determinamos o que deve ser exibido ou executado, posição, estilo, etc.

Importante frisar que não obrigatoriamente o código que desenvolvemos é enviado para o usuário (veja Páginas Dinâmicas), ou seja, o código acaba 'convertido' em HTML.

Como nada é para sempre, especialmente em web, temos dezenas de versões do programa desde a sua criação até a presente data.

Versionamento

Um termo que você verá muito em desenvolvimento é o controle de versões do programa ou Versionamento.

Imagine você ter um 'código' funcionando num cliente e depois de uma modificação ( pequena ou grande ) a parte mais importante do site para de funcionar. Se você sabe o que fez pode voltar mas se forem muitas modificações a coisa pega, é melhor salvar a versão anterior, fazer as modificações e se der problema você poderá retornar o código salvo anteriormente .

Portanto é muito importante que você salve as versões antigas da sua página se quiser, em caso de erro, retornar a anterior. Se o erro foi feito no visual studio você pode ir teclando <control> z que o visual studio vai desfazendo uma por uma das modificações até chegar ao que era originalmente. Contudo se você salvar e sair do Visual studio perderá o histórico de modificações.

Existem algumas ferramentas para 'salvar' a versão do programa atual. A grande maioria delas são grátis e são bastante simples de usar. Basta clicar num botão, informar uma mensagem que identificará a versão para o programador do tipo 'versão 12 10 2023' e clicar em 'ok' que o programa salva todo o conteúdo dos seus 'fontes' numa pasta local ou remota dependendo da ferramenta.

Nessa ferramentas salvamos uma versão do nosso programa ao efetuar uma publicação ( algumas vezes chamadas de push ) e trazemos uma versão antiga do programa ao solicitar um pull. Neste caso é exibida uma lista de 'versões' do programa e é perguntado ao usuário qual a versão que deseja retornar.

As ferramentas mais utilizadas no versionamento são TFS (team fundation service) e GIT e GITHUB cada uma delas tem vantagens e desvantagens em relação uma com a outra.

O ponto ruim dessas publicações é que elas geram muito 'lixo', ou seja, cada vez que você 'versiona' um site ele cria uma cópia de cada item dele, sendo assim, se seu 'programa fonte' for meio extenso e você fizer 'versionamentos' com frequência terá um grande número de fontes e, a grande maioria, lixo porque utilizamos somente as 4 últimas versões do programa.

Ambientes

Na produção de software as empresas costumam ter mais de um servidor executando uma tarefa de maneira que se um deles falhar o outro mantém o serviço funcionando. Essa é a tecnologia dos 'clusters' de servidores, literalmente um conjunto de servidores fazendo a mesma coisa, visa também distribuir a carga porque um servidor só não atenderia a demanda.

No desenvolvimento web além desses 'clusters' temos a hierarquia de servidores. Um servidor de produção tem que funcionar sempre, portanto nada de testes neles, só versões definitivas. É como temos versões definitivas sem fazer 'testes' ? Impossível. Para isso são criados 'servidores de testes' para essa finalidade. Nele fazemos todos os testes até termos certeza que está tudo ok e ai podemos subir tudo para os servidores de produção. Explicando melhor:

Normalmente nas empresas temos 3 ambientes:

1-Ambiente de produção : Esse é o ambiente que todos na Internet 'enxergam' e não pode parar nunca. Imagine um banco ou uma grande empresa, seus serviços dependem desse 'servidor'.

2-Homologação : É um ambiente 'cópia' do de produção. Normalmente possuem os mesmos dados ou apenas alguns dados fictícios para testes. Este ambiente é facultativo, nem sempre temos um servidor de homologação na empresa. Este ambiente se destina aos testes finais antes de colocar o programa no ambiente de produção.

3-Testes : É o ambiente que publicamos para os testes iniciais das modificações que fizemos. Muitas vezes podemos fazer este 'ambiente de testes' na nossa própria máquina mas algumas vezes trabalhamos com uma parte do projeto e para 'rodar' ele precisamos publicar no servidor de teste porque ele depende de um 'conjunto' de apps instaladas no servidor para funcionar.

Equipe e Fábrica de Software

Se você algum dia trabalhar em uma empresa grande não será o único desenvolvedor da empresa. Sendo assim pode ser que os gestores do projeto coloquem esses desenvolvedores para produzir diferentes partes do sistema. E como tudo acaba funcionando junto e perfeitamente ?

Normalmente cada desenvolvedor ou 'equipe de desenvolvedores' tem uma cópia completa do sistema em um 'ambiente de testes ' e está autorizada a alterar uma parte específica do sistema nesse ambiente de testes.

Sendo assim se um desenvolvedor alterar uma parte do programa que não está autorizado a fazê-lo receberá um puxão de orelhas porque pode provocar erros em outras partes do sistema mas fique tranquilo que os outros desenvolvedores tem 'cópias' das partes que lhes pertencem na máquina deles e poderão restaurar o programa alterado indevidamente.

Este 'ambiente de testes' pode ser a própria máquina de desenvolvimento. Fazemos as modificações e 'rodamos' a app para fazer os testes iniciais para verificar se as modificações foram efetivas e se não provocam erros com as demais 'partes' do sistema.

Passando nesses 'testes' podemos publicar nossas modificações para o ambiente de 'homologação' ou mesmo de 'produção'

TAG

Se você conhece bem o Inglês sabe que tag significa berruga ( skin tags ) mas não é bem isso que significa em web.
TAG é um marcador feito com texto simples mas que indica que o elemento não é um texto, pode ser uma imagem, um vídeo, um campo de entrada de texto, etc.
Tecnicamente tudo que não é puro texto que você vê dentro da página HTML está dentro de uma tag HTML.

Citando um exemplo, a letra b é uma letra mas ao colocar ela entre os sinais de maior e menor ( <b> ) ela se torna a tag negrito que Causa o feito de deixar o texto em seu interior em negrito.

Acentuação e Idioma

No visual studio e na maioria das ferramentas do windows ao criar uma página nova o conjunto de caracteres padrão será Europeu Ocidental (Windows) - Página de Código 1252. Este item foi criado lá da época das primeiras versões do windows e para manter a compatibilidade entre as versões anteriores, esta codificação foi mantida até hoje. Usa apenas 8 bits de informação para representar todos os caracteres o que limita seu uso a uma ou poucas linguagens.

Infelizmente o padrão da Internet / WEB é Unicode (UTF-8) - Página de Código 65001 que é um conjunto de caracteres expandido, mundial que usa 16 bits e pode representar qualquer caractere de qualquer idioma do globo terrestre, desde os ideogramas japoneses e árabes até os gregos.

Por causa dessa 'variedade de conjunto de caracteres' temos graves problemas quando os dados vão de um sistema para outro. Na linguagem asp net temos funções que convertem os caracteres de um 'conjunto de caracteres' para outro, além das funcionalidades de idioma que convertem datas, entre outras coisas, de um idioma para outro.

Por esse motivo muita acentuação é perdida quando usamos o padrão errado ou quando tentamos exportar informações do windows para a web e vice-versa.
Citando um exemplo, ao pegar um nome de arquivo do sistema operacional(windows) e exibir na web com UTF-8 toda a acentuação dos nomes dos arquivos será perdida. Para corrigir este problema temos de usar um locale para pt-br (em php : utf8_encode('string')).

Container

Dizemos que um elemento é container de outro quando o elemento corrente esta dentro de um outro em nível hierárquico superior (vide DOM), é filho de um elemento pai que abriga diversos um ou mais elementos filhos dentro dele. Citando um exemplo, uma tag div com tags ul ou input dentro para alinhar e modelar sua exibição. Todas as tags dentro da tag div seriam tags filhas e a tag div seria a pai e container de todas as demais dentro dela.

Lembre-se que o container de todas as tags do documento é o elemento BODY.

O que implica uma tag conter outra tag ? Simples, a tag 'container' pode 'delegar' propriedades dela para as tags contidas. Citanto um exemplo, dentro de uma tag link eu coloco um texto e uma imagem. Clicando no texto ou na imagem a página iria para o link apontado pela tag 'container' link. O link modificou o texto e a imagem que não tem a funcionalidade de clicar e enviar para outra página, mas fazem isso porque heradarm a propriedade da tag 'container'.

     Um exemplo do que mencionei no parágrafo acima

Tags de Formulário

São tags html que se destinam a armazenar as informações digitadas pelo usuário e que serão enviadas ao servidor futuramente através do botão submit ou post.
Na tag form temos a definição do destino onde os dados devem ser enviados.
Contudo é necessário ter uma 'tecnologia de servidor' no destino dos dados porque é no mecanismo do servidor web que as informações podem ser trocadas. Se você enviar simplemente para uma página de destino os dados serão perdidos.

As tags de formulário mais comuns são form, input type text (acho que todas as tags input), botão tipo submit. Contudo podemos enviar opções em checkboxes, option buttons e podemos enviar informações escondidas, que o usuário não precisa sequer saber que exite com uma tag input tipo hidden.

Produção de Programas

Podemos dividir a produção de programas em duas grandes áreas : O desenvolvimento de aplicações nativas para as plataformas ( a Microsoft chama de Windows Forms ) e as aplicações web ( a Microsoft chama de aplicações web ).

Aplicações nativas da plataforma

Há uns 20 anos atrás era só o que havia mas com o crescimento da Internet a demanda por aplicações web subiu muito e hoje a grande maioria é desenvolvimento web.

O grande mau das aplicações nativas é que muitas delas são casadas com a plataforma, ou seja, se você quer desenvolver para a Microsoft tem que usar as ferramentas da Microsoft, se quiser desenvolver para a Apple tem que conhecer e utilizar as ferramentas da Apple e o mesmo vale para a Google.
Isto criou um seccionamento que muitas vezes empresas tem que ter duas ou tres equipes para desenvoler o mesmo software em plataformas diferentes.

Outra grande desvantagem é que as ferramentas web hoje estão muito mais flexíveis que as nativas porque receberam o foco das atenções por anos e foram feitos muitos melhoramentos na web e poucos nas nativas.

Ferramentas de desenvolvimento

Todos desenvolvedores desenvolvem programas utilizando ferramentas que facilitam o desenvolvimento e aumentam a produtividade. Para isso são criados os ferramentas que atendam a necessidades desses desenvolvedores e, dependendo da sua necessidade, existirá um ferramenta que tem vantagem sobre outras ferramentas para execução das tarefas.

A principal função dessas 'ferramentas' é auxiliar o desenvolvedor a realizar a sua tarefa da melhor maneira possível.

Editores de Texto

Os editores de texto voltados para desenvolvimento possuem algumas facilidade fundamental que é a aplicação de cores para diferenciar partes do programa. Por exemplo:

Os melhores exemplos de editores de texto são o Sublime Text, o ATOM, o Visual Studio Code e muitos outros.
Eles costumam ser leves por serem simples e restritos.

Ambientes Integrado de desenvolvimento (IDE)

A IDE é velha, vem do tempo do Turbo Pascal no DOS mas fez tanto sucesso que até hoje é utilizada.
Além de ser editor de textos permite ainda compilar e executar programas ( na plataforma nativa ), publicar / instalar o programa numa máquina local ou remota na rede ou mesmo publicar diretamente num site web.

Os melhores exemplos são o Eclipse, NetBeans, o Visual Studio Community Edition.
Costumam ser bem mais pesados que os editores de texto mas são muito mais completos como, por exemplo, ao alterar o tipo da tag de abertura automaticamente a IDE altera o tipo da tag de fechamento ou mesmo alertar para um erro de sintaxe no JavaScript, coisa que em outra plataforma de desenvolvimento só seria notada no momento de execução no site.

Fases da montagem do programa

Se você leu o que mencionei acima então sabe que o desenvolvedor desenvolve o programa numa linguagem de alto nível mais amigável que 'mascara' certo grau de complexidade na montagem da aplicação.

Módulos

Todo programa hoje em dia pode ser separado em módulos sendo que cada um desses módulos faz uma tarefa específica como validar um cpf, autenticar o usuário.
O módulo tem a incumbência de tornar uma aplicação complexa como um todo em módulos, pequenos, simples e que executam cada um uma pequena parte dessa atividade e, todos reúnidos, realizam a tarefa solicitada.

Abstração

Abstração é o poder que a linguagem ou o ambiente dá ao programador de maneira simplificar o desenvolvimento da aplicação.

Quando você declara uma variável a inteira o programa aloca ( designa ) uma área de memória, em bytes, capaz de armazenar o valor do tipo da variável e dá a essa 'alocação de memória' o nome a. Assim quando você pede para executar a instrução a=0 o programa vai na região de memória onde a variável foi designada e zera seu valor. Parece uma coisa tola e boba mas é fundamental para facilitar a vida do programador.

Outra coisa que a abstração permite é a utilização de recursos sem a necessidade de compreendê-los em detalhes. Por exemplo, numa aplicação Android eu posso pedir a uma funcionalidade para bater uma foto sem me preocupar qual será a sua resolução ou como será feito em detalhes. O programa simplesmente retornará a foto esta na pasta x ou não foi tirada a foto.

Classes

Na grande maioria das linguagens Classes são como 'receitas de bolo', ou seja, explicam como fazer uma coisa mas a coisa em sí realmente ainda não existe, é só um método ou modelo de 'como fazer a coisa'. Portanto, classe seria a 'receita de bolo' que em momento nenhum é o bolo. O bolo seria a realização da receita ou, em nosso caso, da classe tornada real fisicamente.

Explicando um pouco melhor numa classe nós podemos dizer que existe uma variável a e ela é do tipo inteira só que numa classe existe a definição mas ainda não existe na memória do computador para que este possa fazer cálculos, por exemplo.

Instanciamento

No instânciamento carregamos uma classe para a memória do computador. Aí dizemos que os elementos da classe realmente existem mas técnicamente ainda não foram inicializados, ou seja, como no exemplo mencionado acima a variavel inteira a foi criada na memória mas qual é o seu valor ? Se o sistema ao carregar a variável não colocou um valor default esta variável terá o valor que estava na memória no momento que foi reservado o espaço da memória para aquela variável, portanto ela terá um valor qualquer.
Uma das palavras chaves para instanciar uma classe é a palavra new.

Diferença entre a definição da classe e seu instanciamento

Como disse acima na definição da classe temos a 'receita do bolo' o que nada mais é que uma maneira de se criar o bolo mas NÃO É O BOLO EM Sí.
Exemplo : Classe 'meuBoloPredileto'

Contudo no instanciamento trazemos a classe e seus elementos para a memória e com isto o 'bolo' que antes era uma simples receita passa a ser um 'bolo' real, ou seja, o que antes era uma mera descrição falando que existia uma variável a inteira agora é uma área de memória que se atribuiu a variável a e com isto podemos fazer operações e cálculos com ela.

Construtor

O Construtor normalmente é um método que é chamado assim que a classe é carregada para a memória para inicializar seus elemento. Portanto se quero definir que o string nome tem o valor 'Carlos' logo após a carga da classe pelo sistema seria chamado o método construtor que faria esta atribuição.
Em muitos dos sistemas o método construtor é chamado automaticamente, portanto na própria classe definimos o método construtor que será executado assim que a classe for carrgada.

Interface

Suponha que uma parte I do programa carregue a Classe A...ai suponha que a Classe II carregue também a classe A...o que vai acontecer ? Quando o programa for compilado ( convertido para o código que a máquina sabe executar ) vai dar um erro de dupla definição da Classe A porque se foi carregado o mesmo objeto duas vezes qual deles deve ser usado ?

Em todas as linguagens a definição de um item tem que ser único ou ter uma assinatura que diferencie ele de outro. Por exemplo, poderiamos ter uma variavel a inteira e outra variavel a string e ao atribuir o valor 4 a variável a o programa saberia, automaticamente, que como o valor atribuído é inteiro deverá ser utilizada a variável a inteira e não a string.
Isso nem sempre é possível com variáveis mas com funções, por exemplo, é possível.

A Interface informa que existe o elemento mas define ele como externo, ou seja, será definido em outra parte do programa a ser compilado. Portanto, diversos módulos poderiam usar a classe A informada pela interface mas só um módulo faria a inclusão da classe A fora do módulo pois esta seria a que faria todas as definições em detalhes.

Citando um exemplo, numa interface teriamos a definição de uma variável a inteira mas nessa definição da interface ela seria definida como external, ou seja, a interface informa o nome e o tipo da variável e define que alguém futuramente definirá mais algum detalhe sobre ela. Para o módulo que esta compilando sabendo o nome e o tipo da variável é o suficiente para prosseguir na compilação e será deixado para no final da montagem do programa compilado (linkagem) juntar todas as partes do programa e verificar se esta tudo certo.

Lógicamente podemos ter conflito entre a classe e a interface. A classe pode dizer que a variável a é inteira e a interface dizer que a variável a é string.

Passagem de parâmetros

Na maioria das linguagem a passagem de parâmetros se dá ou por valor (ByVal) ou por referência (ByRef).

ByVal ( Por valor )

Como o próprio termo diz, a passagem do parâmetro se dá por valor, ou seja, os valor da variável em sí é passado.
Sendo assim se eu informar var a : integer = 20; e chamar a funcaox(a); Na chamada da funcaox estarei passando o valor da variável a.
Na funcaox se eu só quiser utilizar o valor sem problemas. Mas se eu precisar fazer com que na funcaox o valor vá de 0 até o valor de a eu preciso criar outra variável para permitir essa 'alteração de valor'. Então eu crio e passo o valor do parâmetro para uma variável e utilizo a variável local criada e não o parâmetro recebido.
Outra problemas com a passagem de parâmetros por valor é que você não pode alterar o valor do parâmetro na função chamadora, ou seja, se eu fizer na funcaox a=a+1 ( se a linguagem permitir ) a funcao x até pode utilizar esse novo valor mas com certeza a função chamadora não irá receber o valor da variável a alterado da funcaox porque passou apenas seu valor.

Na maioria das linguagens as variáveis que ocupam poucos bytes são passadas por valor, como as variáveis inteiras, por exemplo.

ByRef ( Pela Referência )

Neste caso é passado um ponteiro apontando para região de memória onde a variável foi armazenada.
Sendo assim a função chamada não precisa criar uma nova variável se precisar alterar seu valor e se alterar o seu valor a função chamadora também terá o valor da variável alterada no sistema.

Na maioria das linguagens as variáveis que ocupam muitos bytes são passadas por referencia já que o simples fato de copiar seria um custo em processamento e em memória. As variáveis tipo string e arrays são normalmente passados por referência.

Paradigmas de Programação

Se você é um desenvolvedor deve conhecer bem sua ferramenta de trabalho e deve saber quais são os recursos que ela possui e quais ela não possui. O x da questão é quanto trabalho você tem para produzir o serviço desejado ?. Em outras palavras, qual é a produtividade da ferramenta.

Se você trabalha com ASP NET no estilo aplicações web está utilizando uma ferramenta ultrapassada, mas altamente produtiva.
Provavelmente hoje você está usando outra forma de programação web, mas com que custo e qual a produtividade dessa 'nova ferramenta'?

Já vi muita gente se masturbando com código, fazendo ele super-complicado de maneira que só ele compreendesse ou que um novato jamais entenderia o que ele fez. Isso é o que passa na cabeça de um novato apenas, um profissional sabe que a forma mais simples sempre é melhor porque todo o projeto se desenvolve com o tempo e se torna cada vez mais complexo e que, seja lá qual for sua ferramenta de desenvolvimento, seu sistema deverá ser capaz de suportar essas atualizações. Essa é a real arte do desenvolvedor, fazer um sistema que sempre atenda ao cliente, em qualquer circunstância.

Portanto a 'abstração' que a ferramenta possui é fundamental para a produtividade. Num Asp Net arrastar um controle calendário e arrastar para um formulário todo o código necessário para ele funcionar já vai junto com o componente. Se você for fazer a mesma coisa mesmo com componentes pré-fabricados do html ou outra ferramenta terá que fazer alguns códigos para que o calendário funcione corretamente em sua ferramenta. O problema é quando esse código é muito grande ou demanda muito tempo para desenvolvimento ou depuração.

Hoje em dia muita coisa tem sido feita em JavaScript mas a maneira com que a interface com a ferramenta foi feita é muito precária em muitos casos. Se você tem que ficar se preocupando com roteamento e um outro monte de coisas isso implicará negativamente em sua produtividade.